<template>
  <div class="home-page">
    <!-- 顶部通栏 -->
    <div class="top-bar">
      <div class="container">
        <div class="top-bar-content">
          <div class="service-info">
            <span><i class="icon">✓</i>全国包邮</span>
            <span><i class="icon">✓</i>7天无理由退换</span>
            <span><i class="icon">✓</i>正品保障</span>
          </div>
          <div class="user-actions">
            <template v-if="!userStore.isLogin">
              <a @click="$router.push('/login')">请登录</a>
              <a @click="$router.push('/register')" class="register">免费注册</a>
            </template>
            <template v-else>
              <span class="welcome">你好，{{ userStore.userInfo?.nickname }}</span>
              <a @click="handleLogout">退出</a>
            </template>
            <a>我的订单</a>
            <a @click="$router.push('/cart')">购物车</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 头部搜索区 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo">
            <h1>AutoParts<span>汽配商城</span></h1>
          </div>
          
          <div class="search-area">
            <div class="search-box">
              <el-select v-model="selectedCarModel" placeholder="选择车型" class="car-select">
                <el-option label="大众" value="volkswagen" />
                <el-option label="丰田" value="toyota" />
                <el-option label="本田" value="honda" />
                <el-option label="奔驰" value="benz" />
                <el-option label="宝马" value="bmw" />
              </el-select>
              <el-input 
                v-model="searchKeyword" 
                placeholder="输入配件名称 / 车型"
                class="search-input"
                @keyup.enter="handleSearch"
              >
                <template #append>
                  <el-button type="primary" @click="handleSearch">搜索</el-button>
                </template>
              </el-input>
            </div>
            <div class="hot-keywords">
              <span class="label">热门：</span>
              <a v-for="keyword in hotKeywords" :key="keyword" @click="searchKeyword = keyword; handleSearch()">
                {{ keyword }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主导航栏 -->
    <nav class="main-nav">
      <div class="container">
        <div class="nav-content">
          <a v-for="item in navItems" :key="item.name" :class="['nav-item', { active: item.active }]">
            {{ item.name }}
          </a>
        </div>
      </div>
    </nav>

    <!-- Banner轮播 + 分类导航 -->
    <section class="banner-section">
      <div class="container">
        <div class="banner-wrapper">
          <!-- 左侧分类导航 -->
          <div class="category-sidebar">
            <div v-for="cat in mainCategories" :key="cat.id" class="category-item">
              <span class="cat-icon">{{ cat.icon }}</span>
              <span class="cat-name">{{ cat.name }}</span>
              <i class="arrow">›</i>
            </div>
          </div>
          
          <!-- 轮播图 -->
          <div class="banner-carousel">
            <el-carousel height="420px" :interval="5000">
              <el-carousel-item v-for="banner in banners" :key="banner.id">
                <div class="banner-slide" :style="{ backgroundImage: `url(${banner.image})` }">
                  <div class="banner-text">
                    <h2>{{ banner.title }}</h2>
                    <p>{{ banner.subtitle }}</p>
                    <el-button type="warning" size="large">{{ banner.btnText }}</el-button>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </section>

    <!-- 分类导航模块 -->
    <section class="quick-categories">
      <div class="container">
        <div class="category-grid">
          <div v-for="cat in quickCats" :key="cat.id" class="quick-cat-item">
            <div class="cat-icon-box">{{ cat.icon }}</div>
            <span class="cat-text">{{ cat.name }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门推荐模块 -->
    <section class="hot-products">
      <div class="container">
        <div class="section-header hot-header">
          <div class="title-with-icon">
            <span class="title-icon">🔥</span>
            <h2 class="section-title">热门配件 TOP20</h2>
            <span class="title-subtitle">精选爆款 品质保证</span>
          </div>
          <a class="more-link-btn">查看全部 ›</a>
        </div>
        <div class="product-grid">
          <div v-for="product in hotProducts" :key="product.id" class="hot-product-card" @click="viewProduct(product.id)">
            <div class="hot-product-img">
              <img :src="product.image" :alt="product.name" />
              <div class="hot-badge">🔥热卖</div>
              <div class="quick-view">
                <el-icon><View /></el-icon>
              </div>
            </div>
            <div class="hot-product-info">
              <h3 class="hot-product-name">{{ product.name }}</h3>
              <div class="hot-fit-tag">
                <el-icon><Tools /></el-icon>
                <span>{{ product.fitModels }}</span>
              </div>
              <div class="hot-stats">
                <div class="rating-stars">
                  <span class="stars">★★★★★</span>
                  <span class="rating-text">4.8</span>
                </div>
                <span class="hot-sales">{{ product.sales }}人付款</span>
              </div>
              <div class="hot-price-row">
                <div class="hot-price-box">
                  <span class="hot-price-label">¥</span>
                  <span class="hot-price">{{ product.price }}</span>
                </div>
                <el-button type="warning" size="small" circle @click.stop="addToCart(product)">
                  <el-icon><ShoppingCart /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 车型专区模块 -->
    <section class="car-zone">
      <div class="container">
        <div class="section-header car-zone-header">
          <div class="title-with-icon">
            <span class="title-icon">🚗</span>
            <h2 class="section-title">车型专区</h2>
            <span class="title-subtitle">精准适配 专车专用</span>
          </div>
          <a class="more-link">更多车型 ›</a>
        </div>
        <div class="car-zone-grid">
          <div v-for="zone in carZones" :key="zone.id" class="zone-card">
            <div class="zone-header">
              <div class="zone-brand-info">
                <img :src="zone.logo" :alt="zone.brand" class="brand-logo" />
                <div class="brand-text">
                  <h3>{{ zone.brand }}专区</h3>
                  <p class="brand-desc">专车专用 精准适配</p>
                </div>
              </div>
              <el-button type="primary" text size="small">查看全部 ›</el-button>
            </div>
            <div class="zone-products">
              <div v-for="prod in zone.products" :key="prod.id" class="zone-product-card">
                <div class="zone-product-img">
                  <img :src="prod.image" :alt="prod.name" />
                  <div class="zone-overlay">
                    <el-button type="warning" size="small" round>立即购买</el-button>
                  </div>
                </div>
                <div class="zone-prod-info">
                  <p class="zone-prod-name">{{ prod.name }}</p>
                  <div class="zone-price-row">
                    <span class="zone-price">¥{{ prod.price }}</span>
                    <span class="zone-tag">专配</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 限时秒杀 -->
    <section class="seckill-section">
      <div class="container">
        <div class="section-header seckill-header">
          <div class="title-with-icon">
            <span class="title-icon">⚡</span>
            <h2 class="section-title">限时秒杀</h2>
            <span class="title-subtitle">每日10点准时开抢</span>
          </div>
          <div class="header-right">
            <div class="promo-countdown">
              <span class="countdown-label">距开始</span>
              <div class="countdown-time">
                <span>{{ promoCountdown.hours }}</span>:
                <span>{{ promoCountdown.minutes }}</span>:
                <span>{{ promoCountdown.seconds }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="product-grid">
          <div v-for="item in seckillPromos" :key="item.id" class="seckill-product-card" @click="viewProduct(item.id)">
            <div class="seckill-product-img">
              <img :src="item.image" :alt="item.name" />
              <div class="seckill-badge">⚡秒杀</div>
              <div class="discount-tag">-{{ item.discount }}%</div>
            </div>
            <div class="seckill-product-info">
              <h3 class="seckill-product-name">{{ item.name }}</h3>
              <div class="seckill-price-row">
                <div class="seckill-price-box">
                  <span class="seckill-price-label">¥</span>
                  <span class="seckill-price">{{ item.price }}</span>
                </div>
                <span class="seckill-origin-price">¥{{ item.originPrice }}</span>
              </div>
              <el-button type="danger" size="small" @click.stop="addToCart(item)">
                立即抢购
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 满减专区 -->
    <section class="discount-section">
      <div class="container">
        <div class="section-header discount-header">
          <div class="title-with-icon">
            <span class="title-icon">🎁</span>
            <h2 class="section-title">满减专区</h2>
            <span class="title-subtitle">满300减50 满500减100</span>
          </div>
          <el-button type="danger" plain @click="refreshRecommend">
            <span>立即抢购</span>
          </el-button>
        </div>
        <div class="product-grid">
          <div v-for="item in discountPromos" :key="item.id" class="discount-product-card" @click="viewProduct(item.id)">
            <div class="discount-product-img">
              <img :src="item.image" :alt="item.name" />
              <div class="discount-badge-card">🎁满减</div>
            </div>
            <div class="discount-product-info">
              <h3 class="discount-product-name">{{ item.name }}</h3>
              <div class="discount-price-row">
                <div class="discount-price-box">
                  <span class="discount-price-label">¥</span>
                  <span class="discount-price">{{ item.price }}</span>
                </div>
                <span class="discount-origin-price">¥{{ item.originPrice }}</span>
              </div>
              <el-button type="danger" size="small" @click.stop="addToCart(item)">
                加购
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 组合套餐 -->
    <section class="combo-section">
      <div class="container">
        <div class="section-header combo-header">
          <div class="title-with-icon">
            <span class="title-icon">📦</span>
            <h2 class="section-title">组合套餐</h2>
            <span class="title-subtitle">机油+滤芯+扳手 超值组合</span>
          </div>
          <el-button type="warning" plain @click="refreshRecommend">
            <span>查看套餐</span>
          </el-button>
        </div>
        <div class="product-grid">
          <div v-for="item in comboPromos" :key="item.id" class="combo-product-card" @click="viewProduct(item.id)">
            <div class="combo-product-img">
              <img :src="item.image" :alt="item.name" />
              <div class="combo-badge-card">📦套餐</div>
            </div>
            <div class="combo-product-info">
              <h3 class="combo-product-name">{{ item.name }}</h3>
              <div class="combo-price-row">
                <div class="combo-price-box">
                  <span class="combo-price-label">¥</span>
                  <span class="combo-price">{{ item.price }}</span>
                </div>
                <span class="combo-save-text">省¥{{ item.save }}</span>
              </div>
              <el-button type="warning" size="small" @click.stop="addToCart(item)">
                加购
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 猜你喜欢模块 -->
    <section class="recommend-section">
      <div class="container">
        <div class="section-header recommend-header">
          <div class="title-with-icon">
            <span class="title-icon">💡</span>
            <h2 class="section-title">猜你喜欢</h2>
            <span class="title-subtitle">根据您的浏览推荐</span>
          </div>
          <el-button type="primary" plain @click="refreshRecommend">
            <span>换一批</span>
          </el-button>
        </div>
        <div class="product-grid">
          <div v-for="product in recommendProducts" :key="product.id" class="recommend-product-card" @click="viewProduct(product.id)">
            <div class="recommend-product-img">
              <img :src="product.image" :alt="product.name" />
              <div class="recommend-badge">💡推荐</div>
              <div class="quick-actions">
                <el-button type="info" size="small" circle>
                  <el-icon><Star /></el-icon>
                </el-button>
              </div>
            </div>
            <div class="recommend-product-info">
              <h3 class="recommend-product-name">{{ product.name }}</h3>
              <div class="recommend-fit-tag">
                <el-icon><Tools /></el-icon>
                <span>{{ product.fitModels }}</span>
              </div>
              <div class="recommend-stats">
                <span class="recommend-sales">{{ product.sales }}人付款</span>
                <div class="rating-mini">
                  <span class="stars-mini">★★★★☆</span>
                </div>
              </div>
              <div class="recommend-price-row">
                <div class="recommend-price-box">
                  <span class="recommend-price-label">¥</span>
                  <span class="recommend-price">{{ product.price }}</span>
                </div>
                <el-button type="primary" size="small" @click.stop="addToCart(product)">
                  加购
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-col">
            <h4>购物指南</h4>
            <a>购物流程</a>
            <a>会员介绍</a>
            <a>常见问题</a>
            <a>联系客服</a>
          </div>
          <div class="footer-col">
            <h4>配送方式</h4>
            <a>上门自提</a>
            <a>211限时达</a>
            <a>配送服务查询</a>
            <a>配送费收取标准</a>
          </div>
          <div class="footer-col">
            <h4>支付方式</h4>
            <a>货到付款</a>
            <a>在线支付</a>
            <a>分期付款</a>
            <a>公司转账</a>
          </div>
          <div class="footer-col">
            <h4>售后服务</h4>
            <a>售后政策</a>
            <a>价格保护</a>
            <a>退款说明</a>
            <a>返修/退换货</a>
          </div>
          <div class="footer-col">
            <h4>关于我们</h4>
            <a>平台介绍</a>
            <a>联系方式</a>
            <a>隐私政策</a>
            <a>服务条款</a>
          </div>
        </div>
        <div class="footer-bottom">
          <p>© 2024 AutoParts 汽配商城 版权所有 | 客服热线：400-123-4567</p>
          <div class="payment-methods">
            <span>支付方式：</span>
            <i>💳</i><i>🏦</i><i>📱</i>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { View, ShoppingCart, Tools, Star } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const searchKeyword = ref('')
const selectedCarModel = ref('')

const hotKeywords = ['机油', '刹车片', '轮胎', '滤芯', '火花塞']

const navItems = [
  { name: '机油滤芯', active: false },
  { name: '轮胎轮毂', active: false },
  { name: '车灯音响', active: false },
  { name: '保养耗材', active: false },
  { name: '改装配件', active: false },
  { name: '车型专区', active: false },
  { name: '促销活动', active: true },
  { name: '我的订单', active: false }
]

const mainCategories = [
  { id: 1, name: '机油滤芯', icon: '🛢️' },
  { id: 2, name: '轮胎轮毂', icon: '🛞' },
  { id: 3, name: '刹车系统', icon: '🛑' },
  { id: 4, name: '车灯音响', icon: '💡' },
  { id: 5, name: '保养耗材', icon: '🔧' },
  { id: 6, name: '电瓶电器', icon: '🔋' },
  { id: 7, name: '底盘悬挂', icon: '⚙️' },
  { id: 8, name: '改装配件', icon: '🏁' }
]

const banners = [
  { id: 1, image: 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=1200', title: '机油买2送1', subtitle: '全场机油大促销，限时优惠', btnText: '立即抢购' },
  { id: 2, image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200', title: '新品轮胎上市', subtitle: '米其林新款轮胎，静音舒适', btnText: '查看详情' },
  { id: 3, image: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=1200', title: '车型专属配件', subtitle: '大众/丰田专区，精准适配', btnText: '进入专区' }
]

const quickCats = [
  { id: 1, name: '机油', icon: '🛢️' },
  { id: 2, name: '轮胎', icon: '🛞' },
  { id: 3, name: '滤芯', icon: '🔍' },
  { id: 4, name: '刹车片', icon: '🛑' },
  { id: 5, name: '火花塞', icon: '⚡' },
  { id: 6, name: '电瓶', icon: '🔋' },
  { id: 7, name: '车灯', icon: '💡' },
  { id: 8, name: '雨刷', icon: '🌧️' },
  { id: 9, name: '防冻液', icon: '❄️' },
  { id: 10, name: '玻璃水', icon: '💧' }
]



const hotProducts = ref([
  { id: 1, name: '美孚1号全合成机油 5W-30 4L', price: 299, sales: 2341, fitModels: '大众/奥迪/丰田', image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=300' },
  { id: 2, name: '博世火花塞 铂金 4支装', price: 89, sales: 1897, fitModels: '本田/丰田/日产', image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=300' },
  { id: 3, name: '米其林轮胎 韧悦 195/65R15', price: 599, sales: 1456, fitModels: '大众/别克/福特', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300' },
  { id: 4, name: '博士刹车片 陶瓷前片', price: 199, sales: 1234, fitModels: '大众/奥迪', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300' },
  { id: 5, name: '瓦尔塔蓄电池 60AH', price: 499, sales: 987, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?w=300' },
  { id: 6, name: '飞利浦LED大灯 H7', price: 399, sales: 876, fitModels: '大众/奥迪/宝马', image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=300' },
  { id: 7, name: '曼牌空气滤芯', price: 59, sales: 2156, fitModels: '大众/奥迪', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300' },
  { id: 8, name: '马勒机油滤芯', price: 45, sales: 1987, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=300' },
  { id: 9, name: '博世雨刷器 无骨', price: 79, sales: 1654, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=300' },
  { id: 10, name: '壳牌全合成机油 5W-40', price: 279, sales: 1432, fitModels: '大众/奥迪/宝马', image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=300' },
  { id: 11, name: '固特异轮胎 御乘 205/55R16', price: 659, sales: 1098, fitModels: '本田/丰田/日产', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300' },
  { id: 12, name: 'NGK火花塞 铱金', price: 119, sales: 1876, fitModels: '本田/丰田', image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=300' }
])

const carZones = ref([
  {
    id: 1,
    brand: '大众',
    logo: 'https://via.placeholder.com/60x30/1E3A8A/FFFFFF?text=VW',
    products: [
      { id: 1, name: '机油滤芯', price: 45, image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=200' },
      { id: 2, name: '空气滤芯', price: 59, image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=200' },
      { id: 3, name: '刹车片', price: 199, image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=200' }
    ]
  },
  {
    id: 2,
    brand: '丰田',
    logo: 'https://via.placeholder.com/60x30/DC2626/FFFFFF?text=TOYOTA',
    products: [
      { id: 1, name: '机油', price: 299, image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=200' },
      { id: 2, name: '火花塞', price: 89, image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=200' },
      { id: 3, name: '轮胎', price: 599, image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200' }
    ]
  },
  {
    id: 3,
    brand: '新能源',
    logo: 'https://via.placeholder.com/60x30/059669/FFFFFF?text=EV',
    products: [
      { id: 1, name: '电池组', price: 1999, image: 'https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?w=200' },
      { id: 2, name: '充电器', price: 599, image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=200' },
      { id: 3, name: '电机', price: 2999, image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=200' }
    ]
  }
])

const promoCountdown = reactive({ hours: '01', minutes: '23', seconds: '45' })

const seckillPromos = ref([
  { id: 1, name: '博世火花塞', price: 89, originPrice: 139, discount: 36, image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=200' },
  { id: 2, name: '刹车片套装', price: 159, originPrice: 239, discount: 33, image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=200' },
  { id: 3, name: '美孚机油', price: 269, originPrice: 399, discount: 33, image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=200' },
  { id: 4, name: '米其林轮胎', price: 499, originPrice: 699, discount: 29, image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200' },
  { id: 5, name: '瓦尔塔电瓶', price: 459, originPrice: 599, discount: 23, image: 'https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?w=200' }
])

const discountPromos = ref([
  { id: 1, name: '空气滤芯', price: 59, originPrice: 89, image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=200' },
  { id: 2, name: '机油滤芯', price: 45, originPrice: 69, image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=200' },
  { id: 3, name: '雨刷器', price: 79, originPrice: 119, image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=200' },
  { id: 4, name: 'LED大灯', price: 399, originPrice: 549, image: 'https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?w=200' },
  { id: 5, name: '防冻液', price: 89, originPrice: 129, image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=200' }
])

const comboPromos = ref([
  { id: 1, name: '保养套餐A', price: 399, save: 150, image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=200' },
  { id: 2, name: '保养套餐B', price: 599, save: 200, image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=200' },
  { id: 3, name: '刹车系统套餐', price: 699, save: 250, image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=200' },
  { id: 4, name: '灯光升级套餐', price: 899, save: 300, image: 'https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?w=200' },
  { id: 5, name: '轮胎保养套餐', price: 1299, save: 400, image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200' }
])

const recommendProducts = ref([
  { id: 13, name: '嘉实多机油 磁护 5W-40', price: 259, sales: 1543, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=300' },
  { id: 14, name: '电装火花塞 铱铂金', price: 99, sales: 1234, fitModels: '丰田/本田', image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=300' },
  { id: 15, name: '邓禄普轮胎 SP SPORT', price: 579, sales: 987, fitModels: '本田/马自达', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300' },
  { id: 16, name: 'ATE刹车片 陶瓷', price: 219, sales: 876, fitModels: '大众/奥迪', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300' },
  { id: 17, name: '风帆蓄电池 55AH', price: 429, sales: 1098, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?w=300' },
  { id: 18, name: '欧司朗LED大灯 H4', price: 359, sales: 765, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=300' },
  { id: 19, name: '索菲玛空调滤芯', price: 69, sales: 1876, fitModels: '大众/奥迪', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300' },
  { id: 20, name: '福斯机油滤芯', price: 49, sales: 1654, fitModels: '大众/奥迪', image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=300' },
  { id: 21, name: '3M雨刷器 三段式', price: 89, sales: 1432, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1563720223481-83b39a038e6a?w=300' },
  { id: 22, name: '道达尔机油 快驰9000', price: 289, sales: 1321, fitModels: '通用车型', image: 'https://images.unsplash.com/photo-1629736558294-9606400c7c18?w=300' },
  { id: 23, name: '韩泰轮胎 万途仕', price: 489, sales: 1109, fitModels: '现代/起亚', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300' },
  { id: 24, name: '电装空调滤芯', price: 79, sales: 1567, fitModels: '丰田/本田', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300' }
])

const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  router.push(`/products?keyword=${searchKeyword.value}&model=${selectedCarModel.value}`)
}

const handleLogout = () => {
  userStore.clearUserInfo()
  ElMessage.success('已退出登录')
}

const addToCart = (product: any) => {
  if (!userStore.isLogin) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  ElMessage.success(`已添加 ${product.name} 到购物车`)
}

const viewProduct = (id: number) => {
  router.push(`/product/${id}`)
}

const refreshRecommend = () => {
  ElMessage.info('已刷新推荐')
}

let countdownTimer: any = null

onMounted(() => {
  countdownTimer = setInterval(() => {
    // 促销倒计时
    let promoSeconds = parseInt(promoCountdown.seconds)
    let promoMinutes = parseInt(promoCountdown.minutes)
    let promoHours = parseInt(promoCountdown.hours)
    
    if (promoSeconds > 0) {
      promoSeconds--
    } else {
      promoSeconds = 59
      if (promoMinutes > 0) {
        promoMinutes--
      } else {
        promoMinutes = 59
        if (promoHours > 0) {
          promoHours--
        } else {
          promoHours = 23
        }
      }
    }
    
    promoCountdown.seconds = promoSeconds.toString().padStart(2, '0')
    promoCountdown.minutes = promoMinutes.toString().padStart(2, '0')
    promoCountdown.hours = promoHours.toString().padStart(2, '0')
  }, 1000)
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<style scoped>
/* 全局样式 */
.home-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1800px;
  }
}

/* 顶部通栏 */
.top-bar {
  background: #f5f5f5;
  height: 32px;
  font-size: 12px;
  color: #666;
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.service-info {
  display: flex;
  gap: 20px;
}

.service-info .icon {
  color: #ff6700;
  margin-right: 4px;
}

.user-actions {
  display: flex;
  gap: 15px;
}

.user-actions a {
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
}

.user-actions a:hover {
  color: #ff6700;
}

.user-actions .register {
  color: #ff6700;
}

.user-actions .welcome {
  color: #333;
  font-weight: 500;
}

/* 头部搜索区 */
.header {
  background: #fff;
  padding: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0;
}

.logo span {
  font-size: 14px;
  color: #666;
  margin-left: 8px;
}

.search-area {
  flex: 1;
}

.search-box {
  display: flex;
  gap: 10px;
}

.car-select {
  width: 150px;
}

.search-input {
  flex: 1;
}

:deep(.el-input-group__append) {
  background: #ff6700;
  border-color: #ff6700;
  color: #fff;
  padding: 0 30px;
  cursor: pointer;
}

:deep(.el-input-group__append:hover) {
  background: #ff8533;
}

.hot-keywords {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

.hot-keywords .label {
  margin-right: 10px;
}

.hot-keywords a {
  margin-right: 15px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
}

.hot-keywords a:hover {
  color: #ff6700;
}

/* 主导航栏 */
.main-nav {
  background: #fff;
  border-bottom: 2px solid #ff6700;
}

.nav-content {
  display: flex;
  gap: 5px;
}

.nav-item {
  padding: 15px 25px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.nav-item:hover,
.nav-item.active {
  color: #ff6700;
  background: #fff5f0;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff6700;
}

/* Banner区域 */
.banner-section {
  padding: 20px 0;
}

.banner-wrapper {
  display: flex;
  gap: 20px;
}

.category-sidebar {
  width: 200px;
  background: rgba(0,0,0,0.7);
  border-radius: 8px;
  padding: 10px 0;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

.category-item:hover {
  background: rgba(255,255,255,0.1);
}

.cat-icon {
  font-size: 18px;
  margin-right: 10px;
}

.cat-name {
  flex: 1;
  font-size: 14px;
}

.arrow {
  font-size: 18px;
  font-style: normal;
}

.banner-carousel {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-carousel__container) {
  border-radius: 8px;
}

.banner-slide {
  width: 100%;
  height: 420px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 60px;
  position: relative;
}

.banner-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 60%);
}

.banner-text {
  position: relative;
  z-index: 1;
  color: #fff;
}

.banner-text h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 15px 0;
}

.banner-text p {
  font-size: 18px;
  margin: 0 0 25px 0;
  opacity: 0.9;
}

/* 快速分类 */
.quick-categories {
  padding: 30px 0;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 15px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

@media (min-width: 1600px) {
  .category-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1920px) {
  .category-grid {
    grid-template-columns: repeat(15, 1fr);
  }
}

.quick-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 15px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
}

.quick-cat-item:hover {
  background: #fff5f0;
  transform: translateY(-3px);
}

.cat-icon-box {
  font-size: 32px;
}

.cat-text {
  font-size: 13px;
  color: #333;
}

/* 通用section样式 */
section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.more-link {
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  padding: 8px 16px;
  border-radius: 20px;
  background: #f5f5f5;
}

.more-link:hover {
  color: #ff6700;
  background: #fff5f0;
  transform: translateX(5px);
}

.title-area .more-link {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

.title-area .more-link:hover {
  background: rgba(255,255,255,0.3);
  color: #fff;
}



/* 热门推荐 */
.hot-products {
  background: transparent;
  padding: 0;
}

.hot-header {
  background: linear-gradient(135deg, #ff6700 0%, #ff8533 100%);
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(255,103,0,0.3);
}

.hot-header .section-title {
  color: #fff;
  margin: 0;
}

.hot-header .title-subtitle {
  color: rgba(255,255,255,0.9);
}

.more-link-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.3);
}

.more-link-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: translateX(5px);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

@media (min-width: 1600px) {
  .product-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1920px) {
  .product-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}

/* 热门商品卡片 */
.hot-product-card {
  background: #fff;
  border: 2px solid #fff5f0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.hot-product-card:hover {
  box-shadow: 0 8px 24px rgba(255,103,0,0.2);
  transform: translateY(-5px);
  border-color: #ff6700;
}

.hot-product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f9fa;
}

.hot-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.hot-product-card:hover .hot-product-img img {
  transform: scale(1.1);
}

.hot-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #ff6700, #ff8533);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255,103,0,0.4);
}

.quick-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.hot-product-card:hover .quick-view {
  opacity: 1;
}

.quick-view .el-button {
  background: rgba(255,255,255,0.95);
  font-size: 20px;
}

.hot-product-info {
  padding: 12px;
}

.hot-product-name {
  font-size: 13px;
  color: #333;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 36px;
  font-weight: 500;
}

.hot-fit-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  width: fit-content;
}

.hot-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.rating-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stars {
  color: #ff6700;
  font-size: 12px;
}

.rating-text {
  font-size: 11px;
  color: #666;
  font-weight: 600;
}

.hot-sales {
  font-size: 11px;
  color: #999;
}

.hot-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot-price-box {
  display: flex;
  align-items: baseline;
}

.hot-price-label {
  font-size: 14px;
  color: #ff6700;
  font-weight: 600;
}

.hot-price {
  font-size: 22px;
  font-weight: 700;
  color: #ff6700;
}

/* 车型专区 */
.car-zone {
  background: transparent;
  padding: 0;
}

.car-zone-header {
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 2px solid #e5e5e5;
}

.car-zone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (min-width: 1600px) {
  .car-zone-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1920px) {
  .car-zone-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.zone-card {
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.zone-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-5px);
  border-color: #ff6700;
}

.zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f5f5f5;
}

.zone-brand-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.brand-logo {
  height: 40px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.brand-text h3 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
}

.brand-desc {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.zone-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.zone-product-card {
  background: #fff;
  border: 2px solid #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.zone-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  border-color: #ff6700;
}

.zone-product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f9fa;
}

.zone-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.zone-product-card:hover .zone-product-img img {
  transform: scale(1.1);
}

.zone-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.zone-product-card:hover .zone-overlay {
  opacity: 1;
}

.zone-prod-info {
  padding: 10px;
}

.zone-prod-name {
  font-size: 12px;
  color: #333;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.zone-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.zone-price {
  font-size: 16px;
  font-weight: 700;
  color: #ff6700;
}

.zone-tag {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

/* 限时秒杀 */
.seckill-section {
  background: transparent;
  padding: 0;
}

.seckill-header {
  background: linear-gradient(135deg, #ff6700 0%, #ff8533 100%);
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(255,103,0,0.3);
}

.seckill-header .section-title {
  color: #fff;
  margin: 0;
}

.seckill-header .title-subtitle {
  color: rgba(255,255,255,0.9);
}

.header-right {
  display: flex;
  align-items: center;
}

.promo-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
}

.countdown-label {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.countdown-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.countdown-time span {
  background: rgba(0,0,0,0.3);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  min-width: 36px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.seckill-product-card {
  background: #fff;
  border: 2px solid #ffe5d9;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.seckill-product-card:hover {
  box-shadow: 0 8px 24px rgba(255,103,0,0.2);
  transform: translateY(-5px);
  border-color: #ff6700;
}

.seckill-product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f9fa;
}

.seckill-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.seckill-product-card:hover .seckill-product-img img {
  transform: scale(1.1);
}

.seckill-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #ff6700, #ff8533);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255,103,0,0.4);
}

.discount-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e53e3e;
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.seckill-product-info {
  padding: 12px;
}

.seckill-product-name {
  font-size: 13px;
  color: #333;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 36px;
  font-weight: 500;
}

.seckill-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.seckill-price-box {
  display: flex;
  align-items: baseline;
}

.seckill-price-label {
  font-size: 14px;
  color: #ff6700;
  font-weight: 600;
}

.seckill-price {
  font-size: 22px;
  font-weight: 700;
  color: #ff6700;
}

.seckill-origin-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

/* 满减专区 */
.discount-section {
  background: transparent;
  padding: 0;
}

.discount-header {
  background: linear-gradient(135deg, #e53e3e 0%, #f56565 100%);
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(229,62,62,0.3);
}

.discount-header .section-title {
  color: #fff;
  margin: 0;
}

.discount-header .title-subtitle {
  color: rgba(255,255,255,0.9);
}

.discount-product-card {
  background: #fff;
  border: 2px solid #ffe5e5;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.discount-product-card:hover {
  box-shadow: 0 8px 24px rgba(229,62,62,0.2);
  transform: translateY(-5px);
  border-color: #e53e3e;
}

.discount-product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f9fa;
}

.discount-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.discount-product-card:hover .discount-product-img img {
  transform: scale(1.1);
}

.discount-badge-card {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #e53e3e, #f56565);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(229,62,62,0.4);
}

.discount-product-info {
  padding: 12px;
}

.discount-product-name {
  font-size: 13px;
  color: #333;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 36px;
  font-weight: 500;
}

.discount-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.discount-price-box {
  display: flex;
  align-items: baseline;
}

.discount-price-label {
  font-size: 14px;
  color: #e53e3e;
  font-weight: 600;
}

.discount-price {
  font-size: 22px;
  font-weight: 700;
  color: #e53e3e;
}

.discount-origin-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

/* 组合套餐 */
.combo-section {
  background: transparent;
  padding: 0;
}

.combo-header {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}

.combo-header .section-title {
  color: #fff;
  margin: 0;
}

.combo-header .title-subtitle {
  color: rgba(255,255,255,0.9);
}

.combo-product-card {
  background: #fff;
  border: 2px solid #fef3e5;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.combo-product-card:hover {
  box-shadow: 0 8px 24px rgba(245,158,11,0.2);
  transform: translateY(-5px);
  border-color: #f59e0b;
}

.combo-product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f9fa;
}

.combo-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.combo-product-card:hover .combo-product-img img {
  transform: scale(1.1);
}

.combo-badge-card {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}

.combo-product-info {
  padding: 12px;
}

.combo-product-name {
  font-size: 13px;
  color: #333;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 36px;
  font-weight: 500;
}

.combo-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.combo-price-box {
  display: flex;
  align-items: baseline;
}

.combo-price-label {
  font-size: 14px;
  color: #f59e0b;
  font-weight: 600;
}

.combo-price {
  font-size: 22px;
  font-weight: 700;
  color: #f59e0b;
}

.combo-save-text {
  font-size: 12px;
  color: #10b981;
  font-weight: 600;
}

/* 猜你喜欢 */
.recommend-section {
  background: transparent;
  padding: 0;
}

.recommend-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(30,58,138,0.2);
}

.title-with-icon {
  display: flex;
  align-items: center;
  gap: 15px;
}

.title-icon {
  font-size: 32px;
  line-height: 1;
}

.recommend-header .section-title {
  color: #fff;
  margin: 0;
}

.title-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  font-weight: 400;
}

/* 推荐商品卡片 */
.recommend-product-card {
  background: #fff;
  border: 2px solid #e8f4ff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.recommend-product-card:hover {
  box-shadow: 0 8px 24px rgba(30,58,138,0.15);
  transform: translateY(-5px);
  border-color: #2563eb;
}

.recommend-product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f9fa;
}

.recommend-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.recommend-product-card:hover .recommend-product-img img {
  transform: scale(1.1);
}

.recommend-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(30,58,138,0.4);
}

.quick-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.recommend-product-card:hover .quick-actions {
  opacity: 1;
}

.quick-actions .el-button {
  background: rgba(255,255,255,0.95);
}

.recommend-product-info {
  padding: 12px;
}

.recommend-product-name {
  font-size: 13px;
  color: #333;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 36px;
  font-weight: 500;
}

.recommend-fit-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: #e8f4ff;
  border-radius: 4px;
  width: fit-content;
}

.recommend-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.recommend-sales {
  font-size: 11px;
  color: #999;
}

.rating-mini {
  display: flex;
  align-items: center;
}

.stars-mini {
  color: #2563eb;
  font-size: 11px;
}

.recommend-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommend-price-box {
  display: flex;
  align-items: baseline;
}

.recommend-price-label {
  font-size: 14px;
  color: #2563eb;
  font-weight: 600;
}

.recommend-price {
  font-size: 22px;
  font-weight: 700;
  color: #2563eb;
}

/* 底部 */
.footer {
  background: #333;
  color: #999;
  padding: 40px 0 20px;
  margin-top: 40px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

.footer-col h4 {
  color: #fff;
  font-size: 16px;
  margin: 0 0 15px 0;
}

.footer-col a {
  display: block;
  color: #999;
  font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: #ff6700;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #444;
  font-size: 12px;
}

.payment-methods {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-methods i {
  font-size: 20px;
}

/* 响应式设计 - 平板 */
@media (max-width: 1024px) {
  .container {
    padding: 0 15px;
  }
  
  .product-row {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .category-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .car-zone-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
  
  .header-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .logo h1 {
    font-size: 24px;
  }
  
  .search-box {
    flex-direction: column;
  }
  
  .car-select {
    width: 100%;
  }
  
  .main-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-content {
    min-width: max-content;
  }
  
  .nav-item {
    padding: 12px 15px;
    font-size: 13px;
  }
  
  .banner-wrapper {
    flex-direction: column;
  }
  
  .category-sidebar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px;
  }
  
  .category-item {
    flex-direction: column;
    text-align: center;
    padding: 10px 5px;
  }
  
  .cat-name {
    font-size: 12px;
  }
  
  .arrow {
    display: none;
  }
  
  .banner-carousel {
    width: 100%;
  }
  
  .banner-slide {
    height: 300px;
    padding: 0 30px;
  }
  
  .banner-text h2 {
    font-size: 24px;
  }
  
  .banner-text p {
    font-size: 14px;
  }
  
  .category-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 15px;
  }
  
  .quick-cat-item {
    padding: 10px 5px;
  }
  
  .cat-icon-box {
    font-size: 24px;
  }
  
  .cat-text {
    font-size: 11px;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .hot-products {
    padding: 0;
  }
  
  .hot-header {
    padding: 15px 20px;
    margin-bottom: 15px;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .hot-product-card,
  .recommend-product-card {
    border-width: 1px;
  }
  
  .hot-product-info,
  .recommend-product-info {
    padding: 10px;
  }
  
  .hot-product-name,
  .recommend-product-name {
    font-size: 12px;
    height: 32px;
  }
  
  .hot-price,
  .recommend-price {
    font-size: 18px;
  }
  
  .hot-fit-tag,
  .recommend-fit-tag {
    font-size: 10px;
    padding: 3px 6px;
  }
  
  .car-zone {
    padding: 0;
  }
  
  .car-zone-header {
    padding: 15px 20px;
    margin-bottom: 15px;
  }
  
  .car-zone-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .zone-products {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .zone-product-card {
    border-width: 1px;
  }
  
  .zone-prod-info {
    padding: 8px;
  }
  
  .zone-prod-name {
    font-size: 11px;
  }
  
  .zone-price {
    font-size: 14px;
  }
  
  .brand-logo {
    height: 30px;
  }
  
  .brand-text h3 {
    font-size: 16px;
  }
  
  .seckill-header,
  .discount-header,
  .combo-header {
    padding: 15px 20px;
    margin-bottom: 15px;
  }

  .header-right {
    width: 100%;
    margin-top: 10px;
  }

  .promo-countdown {
    justify-content: flex-start;
  }

  .countdown-time {
    font-size: 14px;
  }

  .countdown-time span {
    padding: 4px 8px;
    min-width: 28px;
    font-size: 14px;
  }

  .seckill-product-card,
  .discount-product-card,
  .combo-product-card {
    border-width: 1px;
  }

  .seckill-product-info,
  .discount-product-info,
  .combo-product-info {
    padding: 10px;
  }

  .seckill-product-name,
  .discount-product-name,
  .combo-product-name {
    font-size: 12px;
    height: 32px;
  }

  .seckill-price,
  .discount-price,
  .combo-price {
    font-size: 18px;
  }
  
  .recommend-section {
    padding: 0;
  }
  
  .recommend-header {
    padding: 15px 20px;
    margin-bottom: 15px;
  }
  
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* 响应式设计 - 小屏手机 */
@media (max-width: 480px) {
  .logo h1 {
    font-size: 20px;
  }
  
  .logo span {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
  
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .product-row,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .zone-products {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .promo-products {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* 按钮样式优化 */
:deep(.el-button--warning) {
  background: #ff6700;
  border-color: #ff6700;
  color: #fff;
}

:deep(.el-button--warning:hover) {
  background: #ff8533;
  border-color: #ff8533;
}

:deep(.el-button--primary) {
  background: #1e3a8a;
  border-color: #1e3a8a;
}

:deep(.el-button--primary:hover) {
  background: #2563eb;
  border-color: #2563eb;
}

/* 轮播图指示器样式 */
:deep(.el-carousel__indicator) {
  button {
    background: rgba(255,255,255,0.5);
  }
}

:deep(.el-carousel__indicator.is-active button) {
  background: #ff6700;
}

/* 滚动条样式 */
.main-nav::-webkit-scrollbar {
  height: 4px;
}

.main-nav::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.main-nav::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-item,
.product-card,
.zone-card,
.promo-card {
  animation: fadeIn 0.5s ease-out;
}

/* hover效果增强 */
.product-item:hover .product-image img,
.product-card:hover .product-img img {
  transform: scale(1.05);
  transition: transform 0.3s;
}

.product-image img,
.product-img img {
  transition: transform 0.3s;
}
</style>
